<template>
	<el-row :gutter="20" class="detail-container">
		<el-col :span="24">
			<el-card shadow="hover" class="detail-card">
				<el-page-header class="mb-4" icon="el-icon-arrow-left" title="返回" @back="$router.go(-1)" />

				<!-- 基础信息区块 -->
				<div class="info-section">
					<el-descriptions title="装备详情" :column="2" border class="custom-descriptions">
						<!-- 图片展示列 -->
						<el-descriptions-item label="装备图示" span="2">
							<div class="image-wrapper">
								<img :src="detailData.img" class="equip-image" alt="装备图片" @error="handleImageError" />
							</div>
						</el-descriptions-item>

						<!-- 基础属性列 -->
						<el-descriptions-item label="装备名称">
							<span class="highlight-text">{{ detailData.name }}</span>
						</el-descriptions-item>
						<el-descriptions-item label="装备类型">
							<el-tag effect="dark" :color="getTagColor(detailData.belong)">
								{{ getBelongLabel(detailData.belong) }}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="攻击力">
							<span class="stat-number">{{ detailData.aggressivity }}</span>
						</el-descriptions-item>
						<el-descriptions-item label="暴击率">
							<span class="stat-number">{{ detailData.critical }}%</span>
						</el-descriptions-item>
						<el-descriptions-item label="防御力">
							<span class="stat-number">{{ detailData.defense }}</span>
						</el-descriptions-item>
						<el-descriptions-item label="法力上限">
							<span class="stat-number">{{ detailData.mana }}</span>
						</el-descriptions-item>
					</el-descriptions>
				</div>

				<!-- 耐性信息区块 -->
				<div class="resistance-section mt-6">
					<h3 class="section-title">四灾耐性</h3>
					<el-row :gutter="20">
						<el-col v-for="(value, name) in resistances" :key="name" :xs="12" :sm="6">
							<div class="resistance-item">
								<div class="resistance-label">{{ name }}</div>
								<div class="resistance-value">{{ value }}</div>
							</div>
						</el-col>
					</el-row>
				</div>

				<!-- 套装信息区块 -->
				<div v-if="detailData.belongSuit && currentSuit.name" class="suit-section mt-6">
					<el-divider content-position="left">
						<h3 class="section-title">套装属性</h3>
						<el-button type="primary" size="small" class="suit-btn" @click="handleSuit(currentSuit.id)">
							<el-icon class="btn-icon"><View /></el-icon>
							<span class="btn-text">查看套装详情</span>
						</el-button>
					</el-divider>
					<el-card shadow="never" class="suit-card">
						<div class="suit-header">
							<svg-icon icon-class="suit" class="suit-icon" />
							<span class="suit-name">{{ currentSuit.name }}</span>
						</div>
						<div v-for="effect in sortedSuitEffects" :key="effect.piece" class="effect-item">
							<el-tag type="warning" effect="dark" class="effect-tag">{{ effect.piece }}件套</el-tag>
							<span class="effect-desc">{{ effect.description }}</span>
						</div>
					</el-card>
				</div>

				<el-empty v-else description="无套装属性" :image="noDataImage" class="custom-empty" />

				<el-divider class="custom-divider">个性化属性列表</el-divider>
				<el-table
					:data="tableData"
					class="custom-attribute-table"
					:header-cell-style="{
						background: 'var(--el-color-primary-light-9)',
						color: 'var(--el-color-primary)',
						fontWeight: 600,
						letterSpacing: '0.5px'
					}"
					empty-text="暂无自定义属性"
				>
					<el-table-column prop="des" label="属性描述" align="center">
						<template #default="{ row }">
							<div class="attribute-item">
								<el-icon class="attribute-icon"><MagicStick /></el-icon>
								<span class="attribute-text">{{ row.des }}</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup>
import request from '@/utils/request'
import settings from '@/utils/settings'
import { computed, onBeforeMount, onMounted, reactive, ref } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import noDataImage from '@/assets/no-data.svg'
import { MagicStick, View } from '@element-plus/icons-vue'

const route = useRoute()
const detailData = ref({})
const about = settings.about
const $route = router
const tableData = ref([])
const currentSuit = ref({})

const getBelongLabel = value => {
	if (value === undefined || value === null) {
		return '未知类型'
	}
	const item = belongOptions.value.find(item => item.value === value.toString())
	return item ? item.label : '未知类型'
}

const handleImageError = event => {
	event.target.src = '/public/picture/default-image.png'
}

const handleSuit = async id => {
	$route.push(`/front/equip/equipment/suit/show?id=${id}`)
}

const resistances = computed(() => ({
	火焚耐性: detailData.value.fire,
	寒冻耐性: detailData.value.ice,
	毒伤耐性: detailData.value.drug,
	雷蛰耐性: detailData.value.thunder
}))

const getTagColor = type => {
	const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#B37FEB', '#FF85C0', '#36CFC9']
	return colors[type - 1] || '#909399'
}

const belongOptions = ref([
	{ value: '1', label: '兵器', icon: '/public/picture/兵器.png' },
	{ value: '2', label: '葫芦', icon: '/public/picture/葫芦.png' },
	{ value: '3', label: '头冠', icon: '/public/picture/头冠.png' },
	{ value: '4', label: '臂甲', icon: '/public/picture/臂甲.png' },
	{ value: '5', label: '衣甲', icon: '/public/picture/衣甲.png' },
	{ value: '6', label: '腿甲', icon: '/public/picture/腿甲.png' },
	{ value: '7', label: '珍玩', icon: '/public/picture/珍玩.png' },
	{ value: '8', label: '精魄', icon: '/public/picture/精魄.png' }
])

const sortedSuitEffects = computed(() => {
	if (!currentSuit.value.effect) {
		return []
	}
	return [...currentSuit.value.effect].sort((a, b) => a.piece - b.piece)
})

onMounted(async () => {
	try {
		const res = await request.get(`/equip/${route.query.id}`)
		detailData.value = res.data

		if (detailData.value.belongSuit) {
			const suitRes = await request.get(`/suit/${detailData.value.belongSuit}`)
			currentSuit.value = suitRes.data || {}
		}

		const retableData = await request.get(`/personality/echarts/${$route.currentRoute.value.query.id.toString()}`)
		tableData.value = retableData.data
	} catch (error) {
		console.error('数据加载失败:', error)
		ElMessage.error('数据加载失败')
	}
})
</script>

<style scoped lang="scss">
h1 {
	color: #333;
	font-size: 16px;
	font-weight: bolder;
	line-height: 50px;
}

p {
	color: #666;
	font-size: 16px;
	margin: 10px;
	line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
}
ul {
	list-style: none; /* 移除默认的列表符号 */
	margin: 0;
	padding: 0;
}

li {
	color: #666;
	font-size: 16px;
	line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
	margin-left: 10px;
}
ul:not(:first-child) {
	margin-left: 40px; /* 后两个 ul 向左对齐 */
}

.statistic {
	text-align: center;
}

.effect-item {
	padding: 10px;
	margin: 8px 0;
	border-left: 4px solid #67c23a;
	background-color: #f6ffed;
	border-radius: 4px;
	transition: all 0.3s;
}

.effect-item:hover {
	transform: translateX(5px);
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.mt-4 {
	margin-top: 1rem;
}
.mb-4 {
	margin-bottom: 1rem;
}
.ml-2 {
	margin-left: 0.5rem;
}
.suit-info h3 {
	color: #409eff;
	margin-bottom: 1rem;
}
.effect-item {
	padding: 0.8rem;
	margin: 0.5rem 0;
	border-left: 4px solid #67c23a;
	background-color: #f0f9eb;
	border-radius: 4px;
}

.detail-container {
	min-height: 100vh;
}

.detail-card {
	margin-top: 50px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#app {
	height: auto;
	min-height: 100vh;
}

.custom-descriptions {
	:deep(.el-descriptions__header) {
		margin-bottom: 20px;

		.el-descriptions__title {
			font-size: 18px;
			color: #303133;
			font-weight: 600;
		}
	}
}

.image-wrapper {
	position: relative;
	width: 240px;
	height: 240px;
	margin: 0 auto;

	.equip-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
		z-index: 1;
		position: relative;
	}

	.image-border {
		position: absolute;
		width: 100%;
		height: 100%;
		border: 2px solid #ebeef5;
		border-radius: 8px;
		transform: rotate(45deg);
		background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
}

.stat-number {
	font-family: 'DIN Alternate';
	font-size: 18px;
	color: #409eff;
	font-weight: bold;
}

.resistance-section {
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;

	.section-title {
		color: #606266;
		font-size: 16px;
		margin-bottom: 15px;
	}

	.resistance-item {
		text-align: center;
		padding: 12px;
		background: white;
		border-radius: 6px;
		margin: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.resistance-label {
			color: #909399;
			font-size: 14px;
			margin-bottom: 6px;
		}

		.resistance-value {
			font-size: 18px;
			color: #303133;
			font-weight: bold;
		}
	}
}

.suit-section {
	.suit-card {
		.effect-item {
			display: flex;
			align-items: baseline;
			padding: 12px 16px;
			margin: 8px 0;
			background: linear-gradient(90deg, #fdf6e3 0%, #fef9ec 100%);
			border-radius: 6px;
			border-left: 4px solid #e6a23c;
			transition: all 0.3s;

			&:hover {
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
				transform: translateY(-2px);
			}

			.effect-tag {
				min-width: 70px;
				text-align: center;
				margin-right: 16px;
				letter-spacing: 1px;
			}

			.effect-desc {
				flex: 1;
				color: #5d5d5d;
				font-size: 14px;
				line-height: 1.6;
			}
		}
	}
}

.custom-empty {
	:deep(.el-empty__description) {
		color: #909399;
		margin-top: 10px;
	}

	:deep(.el-empty__image) {
		width: 120px;
	}
}

.highlight-text {
	color: #303133;
	font-weight: 500;
}

.mt-6 {
	margin-top: 24px;
}

.custom-divider {
	:deep(.el-divider__text) {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		font-size: 16px;
		color: var(--el-color-primary);
		padding: 0 20px;
	}
}

.custom-attribute-table {
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

	:deep(.el-table__row) {
		transition: all 0.3s var(--el-transition-function-ease-in-out-bezier);

		&:hover {
			transform: translateX(4px);
			background: var(--el-color-primary-light-9);

			.attribute-icon {
				color: var(--el-color-primary);
			}
		}
	}

	.attribute-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 0;

		.attribute-icon {
			margin-right: 12px;
			font-size: 18px;
			color: #e6a23c;
			transition: color 0.3s;
		}

		.attribute-text {
			font-size: 14px;
			color: #606266;
			line-height: 1.5;
		}
	}
}

.suit-btn {
	border-radius: 20px;
	padding: 8px 20px;
	background: linear-gradient(135deg, #409eff 0%, #3375b3 100%);
	border: none;
	box-shadow: 0 3px 8px rgba(64, 158, 255, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 5px 15px rgba(64, 158, 255, 0.4);
		background: linear-gradient(135deg, #4aa3ff 0%, #3b84cc 100%);
	}

	&:active {
		transform: translateY(0);
		box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
	}

	.btn-icon {
		font-size: 14px;
		margin-right: 8px;
		transition: transform 0.2s;
	}

	.btn-text {
		font-weight: 600;
		letter-spacing: 0.5px;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	}

	&:hover .btn-icon {
		transform: scale(1.1) rotate(-5deg);
	}
}
</style>
